/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog title="风险评估报告" :visible.sync="show" append-to-body width="50%" :before-close="handleClose">
    <el-form :model="formInline" :inline="true">
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="市：">
            <span>{{formInline.cityName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="区：">
            <span>{{formInline.districtName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="站：">
            <span>{{formInline.stationName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="桩：">
            <span>{{formInline.stakeName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="模型名称：">
            <span>{{formInline.modelName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="设备类型：" v-if="formInline.modelType && optionsList.length > 0">
            {{ getObjectType(formInline.modelType) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="更新时间：">
            <span>{{formInline.updateTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item label="指标数量：">
            <span>{{formInline.riskNum}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-form-item label="风险等级：">
            <span :class="formInline.css">{{formInline.level}}</span>
            <el-tooltip placement="top" v-if="formInline.riskClassTip">
              <div v-html="'分值:' + formInline.riskValue + '<br/>' + toBreak(formInline.riskClassTip)" slot="content"></div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form-item>
            <el-button type="primary" v-if="formInline.isAlarm === 0" @click="alarm">确认告警</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-row>
            <el-form-item label="评估详情：">
            </el-form-item>
          </el-row>
          <el-row>
            <el-table :data="formInline.riskCrawlList" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
              <el-table-column label="序号" width="50">
                <template v-slot="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="itemName" label="指标名称"></el-table-column>
              <el-table-column prop="itemCrawlValue" label="采集值"></el-table-column>
              <el-table-column label="阈值区间">
                <template v-slot="scope">
                  {{ '[' + (scope.row.itemThresholdMin==null?'':scope.row.itemThresholdMin) + ',' + (scope.row.itemThresholdMax==null?'':scope.row.itemThresholdMax) + ')'}}
                </template>
              </el-table-column>
              <el-table-column prop="itemValue" label="评估分值"></el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-form-item label="计总：" v-if="formInline.riskValueTip">
              <span>{{ formInline.riskValue}}</span>
              <el-tooltip placement="top">
                <div v-html="toBreak(formInline.riskValueTip)" slot="content"></div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="计算公式：" v-if="formInline.riskContent">
              <span>{{ formInline.riskContent}}</span>
            </el-form-item>
          </el-row>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="风险详情：">-->
<!--            <div v-html="toBreak(reportDetail.reportDesc)"></div>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
<!--      <el-button type="primary" @click="checkBtn">确 定</el-button>-->
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getReportConfirm, getRiskReportDetail} from "../../api/risk/riskTask";
import {getItemDictObject} from "../../api/risk/commonDict";

export default {
  props: ['ReportDialogShow', 'reportDetail'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      optionsList: [],
      formInline: {
        modelName:'',
        modelType:'',
        riskNum:'',
        updateTime:'',
        riskCrawlList:[],
        riskClass:'',
      }
    };
  },
  mounted() {
    //显示弹窗
    this.getInit()
    this.show = this.ReportDialogShow
  },
  methods: {
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    checkBtn() {
      //确定按钮
      this.handleClose()
    },
    alarm() {
      getReportConfirm({reportId:this.reportDetail.id}).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '确认成功', type: 'success' })
          this.formInline.isAlarm = 1
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    getObjectType(type) {
      if (type && this.optionsList.length > 0) {
        return this.optionsList.find(item => item.id === type).itemObjectName
      }
      return ''
    },
    getInit() {
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.initDetail()
    },
    async initDetail() {
      let params = {
        reportId: this.reportDetail.id,
        source: 'web'
      }
      await getRiskReportDetail(params).then((res)=>{
        if(res){
          this.formInline = res
          this.formInline.riskNum = String(res.riskCrawlList.length)
          this.formInline.css = this.reportDetail.css
          this.formInline.level = this.reportDetail.level
          this.formInline.cityName = this.reportDetail.cityName
          this.formInline.districtName = this.reportDetail.districtName
          this.formInline.stationName = this.reportDetail.stationName
          this.formInline.stakeName = this.reportDetail.stakeName
          this.formInline.riskClassTip = this.reportDetail.riskClassTip
          this.formInline.riskValue = this.reportDetail.riskValue
          let content1 = ''
          let content2 = ''
          res.riskCrawlList.forEach(item => {
            content1 += item.itemSymbol + item.itemName + '*' + item.powerValue
            content2 += item.itemSymbol + item.itemValue + '*' + item.powerValue
          })
          this.formInline.riskValueTip = content2.substring(1) + '=' + this.formInline.riskValue
          this.formInline.riskContent = content1.substring(1)
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    toBreak(val) {
      return val.split('\n').join('<br/>')
    }
  }
};
</script>

<style scoped>
.risk-color-red {
  color: red;
}

.risk-color-green {
  color: green;
}

.risk-color-orange {
  color: orange;
}

.risk-color-yellow {
  color: gold;
}
</style>
